<template>
  <!-- 标签页 -->
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <el-tag
        class="el-dropdown-link"
        v-for="(item,index) in dynamicTags"
        :key="index"
        :class="$route.path == item.name? activeClass:''"
        :type="$route.path == item.name? '':'info'"
        :effect="$route.path == item.name? 'dark':'plain'"
        :closable="index !==0"
        @click="tagmenu(item.name)"
        @close="handleCloses(index)"
      >
        <!-- closable==是否可关闭 这里的作用是：阻止首页被关闭-->
        <!-- 下拉菜单 -->
        <el-dropdown
          ref="dropdown"
          trigger="contextmenu"
          @command="handleCommand"
          @contextmenu="dropdownchange(index)"
        >
          <!-- trigger====触发下拉的行为 -->
          {{ item.title }}
          <!-- {{ item.meta.title }} -->
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :command="{a:1,path:item.name,index}">
                <span class="iconfont icon-shuaxin"></span>刷新
              </el-dropdown-item>
              <el-dropdown-item :command="{a:2,path:item.name,index}">
                <span class="iconfont icon-guanbi"></span>关闭右侧标签
              </el-dropdown-item>
              <el-dropdown-item :command="{a:3,path:item.name,index}">
                <span class="iconfont icon-a-huaban2fuben40"></span>全部关闭
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-tag>
    </div>
  </el-scrollbar>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  setup() {},
  data() {
    return {
      // dynamicTags: [{ title: "首页", name: "/Index/IndexAbout" }], // 数组---标签要循环的数组
      // 选中切换样式
      activeClass: "iconfont icon-dingwei1 el-tag__close",
    };
  },
  computed: {
    ...mapGetters(["dynamicTags"]),
  },
  watch: {
    $route(val) {
      // 监听路由
      this.Tagroute(val);
    },
  },
  methods: {
    ...mapActions([
      "tagRouteS",
      "tagClick",
      "handleClose",
      "tagRefresh",
      "rightClose",
      "allClose",
      "dropChang"
    ]),
    //添加标签
    Tagroute(val) {
      console.log(val,"bhhjjj");
      // 路由函数
      this.tagRouteS(val);
      console.log(val, 14777);
    },
    // 标签页---点击选中标签
    tagmenu(name) {
      this.tagClick(name);
    },
    // 标签页---移除标签
    handleCloses(index) {
      this.handleClose(index);
    },
    // 刷新
    handleCommand(e) {
      // const dynamicTags = this.dynamicTags; // 将数组用一个变量代替，每次调用数组时可直接在函数内找到---页面优化减少代码--优化性能
      // this.$router.push({path:`/Index/Indirective${e.path}`})
      // this.$router.push({ path: '/Index/Indirective' + e.path })
      switch (e.a) {
        case 1: // 刷新功能----跳转到空页面刷新再由空页面返回来---跳转时传递路径
          this.tagRefresh(e);
          break;
        case 2: // 关闭右侧标签---点击之后删除当前标签后面的标签
          this.rightClose(e);
          break;
        case 3: // 关闭全部标签----点击之后删除首页标签以外的全部标签(留下首页标签)
        this.allClose()
          break;
        default:
          4;
          break;
      }
    },
    // 点击下拉框展开隐藏
    dropdownchange(index) {
      this.dropChang()
      // //方法一： document.body.click()//点击页面的任何地方都可以隐藏其它的下拉框
      //方法二： this.$refs.dropdown.forEach((item, i) => {
      //   // 检索下标
      //   if (index == i) {
      //     // 如果当前下标等于检索下标
      //     item.handleOpen(); // 展开下拉框
      //   } else {
      //     item.handleClose(); // 关闭下拉框
      //   }
      // });
    },
  },
};
</script>

<style lang="less" scoped>
//滚动条
.scrollbar-flex-content {
  margin-top: 15px;
  display: flex;
}
// 下拉框菜单
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.el-tag {
  margin-left: 20px;
  border-radius: 0;
  cursor: pointer;
}
</style>
